<template>
  <div class="app-shell-footer">
    <div class="footer-height">
      <router-link class="flex" to="/home">
        <i class="icon iconfont on">&#xeb3c;</i>
        <span class="on">首页</span>
      </router-link>
      <router-link class="flex" to="/classify">
        <i class="icon iconfont">&#xe601;</i>
        <span>分类</span>
      </router-link>
      <router-link class="flex" to="/planet">
        <i class="icon iconfont">&#xe802;</i>
        <span>星球</span>
      </router-link>
      <router-link class="flex" to="/shop-cart">
        <i class="icon iconfont">&#xe600;</i>
        <span>购物车</span>
      </router-link>
      <router-link class="flex" to="/mine">
        <i class="icon iconfont">&#xe609;</i>
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.app-shell-footer {
  z-index: 100;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 52px;
  box-shadow: 0 -1px 4px -2px rgba(100, 100, 100, 0.5);

  .footer-height {
    display: flex;
    height: 52px;
    align-items: center;

    .flex {
      flex: 1;
      color: #666;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;

      &:nth-child(2) {
        .icon {
          font-size: 0.31rem;
          line-height: 0.34rem;
        }
      }

      .icon {
        margin-bottom: 0.07rem;
        font-size: 0.38rem;
        line-height: 0.38rem;
      }

      span {
        display: block;
        text-align: center;
        font-size: 0.23rem;
        line-height: 0.2rem;
      }

      &.router-link-active {
        color: #ff6700;
      }
    }
  }
}
</style>